<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { getStorage } from '@tarojs/taro';
import dayjs from 'dayjs';
import { Check as AppNutIconCheck } from '@nutui/icons-vue-taro';

const formState = reactive<AppSysVisitor.Dto>({
  personName: '',
  visitorWorkUint: '',
  purpose: '',
  startTime: 0,
  phone: '',
  idNo: '',
  carNo: '',
  beVisitedPersonOrg: '',
  signLocation: 'h5',
});

onMounted(() => {
  getStorage({
    key: 'visitorInfo',
    success: (res) => {
      for (const key in res.data) {
        if (Object.prototype.hasOwnProperty.call(res.data, key)) {
          formState[key] = res.data[key];
        }
      }
    },
  });
});
</script>

<template>
  <view class="visitor-register-success app-page--1">
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-register-success__header-wrapper">
        <view>提交成功!</view>
        <app-nut-icon-check class="visitor-register-success__icon" />
      </view>
      <view class="visitor-register-success__time">{{
        dayjs(formState.startTime).format('YYYY-MM-DD HH:mm:ss')
      }}</view>
      <view class="visitor-register-success__wrapper">
        <nut-form class="visitor-register-success__form">
          <nut-form-item label="单位" label-align="left">
            <view>{{ formState.visitorWorkUint || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="姓名" label-align="left">
            <view>{{ formState.personName || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="联系电话" label-align="left">
            <view>{{ formState.phone || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="身份证" label-align="left">
            <view>{{ formState.idNo || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="车牌号" label-align="left">
            <view>{{ formState.carNo || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="拜访部门" label-align="left">
            <view>{{ formState.beVisitedPersonOrg || '-' }}</view>
          </nut-form-item>
          <nut-form-item label="事由" label-align="left">
            <view>{{ formState.purpose || '-' }}</view>
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.visitor-register-success {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  color: #333;

  &__header-wrapper {
    font-size: 38px;
    margin-top: 5vh;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon {
    font-size: 48px;
    font-weight: bolder;
    margin-left: 40px;
    color: #27c530;
  }

  &__wrapper {
    padding: 0 20px;
  }

  &__time {
    margin-bottom: 5vh;
  }
}
</style>
